<template>
  <van-grid :column-num="2" :gutter="10">
    <van-grid-item v-for="item in list" :key="item.id"
    @click="$router.push({ path: '/productsDetail', query: { id: item.id } })">
      <template #icon>
        <van-image
          class="shopImg"
          :src="item.image"
        />
      </template>
      <template #text>
        <div class="title">{{ item.storeName }}</div>
        <div class="price">
          ￥{{ item.price }}
          <span class="otPrice" v-if="pricestate">￥{{ item.otPrice }}</span>
        </div>
      </template>
    </van-grid-item>
  </van-grid>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: {}
    },
    pricestate: {
      type: Boolean,
      default: true
    }
  }
}
</script>
<style lang="scss" scoped>
.shopImg {
  width: 130px;
}
.title {
  margin: 2px 0;
  padding-left: 5px;
  width: 100%;
  font-size: 14px;
  text-align: left;
}
.price {
  // display: flex;
  // align-items: center;
  width: 100%;
  overflow: hidden;
  text-align: left;
  font-size: 14px;
  color: #EB7B0D;
  .otPrice {
    font-size: 12px;
    color: #ccc;
    text-decoration: line-through;
  }
}
</style>